<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <th:block th:include="include :: header('用户查询页面')"/>
    <style>
        .layui-card-body .layui-form {
            margin: auto;
        }
        .layui-form-item {
            margin-bottom: 0px;
        }
        .bottom {
            width: 100%;
            position: absolute;
            bottom: 0px;
            left: 0px;
            height: 50px;
            line-height: 50px;
            background-color: #F8F8F8;
            border-top: 1px solid #eee;
        }

        .button-container {
            position: absolute;
            right: 15px;
        }
        body{
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
<div class="layui-row layui-col-space10">

    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-body">
                <form id="formId" class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <label class="layui-form-label">机构</label>
                        <div class="layui-input-inline">
                            <ul data-id="0" id="selectDept" name="deptId"></ul>
                        </div>
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="username" placeholder="请输入姓名"
                                   class="layui-input" />
                        </div>

                        <label class="layui-form-label">工号</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userSn" placeholder="请输入工号"
                                   class="layui-input" />
                        </div>
                        <button class="layui-btn layui-btn-md" lay-submit lay-filter="userSelect-query">
                            <i class="layui-icon layui-icon-search"></i>
                            查询
                        </button>
                        <button type="reset" class="layui-btn layui-btn-md layui-btn-primary">
                            <i class="layui-icon layui-icon-refresh"></i>
                            重置
                        </button>
                    </div>
                </form>
                <div id="test"></div>
            </div>
        </div>

        <div class="bottom" style="position: fixed;">
            <div class="button-container">
                <button type="submit" class="layui-btn layui-btn-primary layui-btn-sm" lay-submit="" lay-filter="userSelect-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    确定
                </button>
            </div>
        </div>
    </div>
</div>
</div>

<th:block th:include="include :: footer"/>
<script>
    var userId = '[[${userId}]]';
    var userName = '[[${userName}]]';
    var m = '[[${m}]]';
    layui.use(['table', 'form', 'jquery', 'transfer', 'dtree'], function () {
        let dtree = layui.dtree;
        let table = layui.table;
        var transfer = layui.transfer;
        let form = layui.form;
        let $ = layui.jquery;

        deptUtil.initDeptSelectTree("selectDept", "deptId","deptName", "0")

        //1.模拟数据
        var data1=[];
        var ids='',usernames='';
        //2.数据格式解析
        transfer.render({
            elem: '#test'
            ,title: ['未选', '已选']//自定义标题
            ,width: '40%' //定义宽度
            ,height: 300 //定义高度
            ,parseData: function(res){//数据参数来源data1转换处理
                return {
                    "value": res.value //data1属性
                    ,"title": res.title//data1属性
                    ,"disabled":res.disabled // false  //是否禁用
                    ,"checked":res.checked// false //是否选中
                }
            }
            ,data: data1//数据参数来源
            ,showSearch: true//显示搜索框
            ,id:"demo1"//唯一标识
            ,value:['6']//用于回显或默认选中
        });
        form.on('submit(userSelect-query)', function (data) {
            let params = data.field
            params.limit = 99999;
            let data1 = transfer.getData('demo1');

            let loading = layer.load();
            $.ajax({
                url: pName + "/system/user/" + m + "/data",
                dataType: 'json',
                type: 'get',
                data: params,
                success: function (result) {
                    layer.close(loading);
                    if (result.code == 0) {
                        if(result.count > 0){
                            result.data.forEach(function (d) {
                                let o = {value: d.id, title: d.username};
                                if(!data1.includes(o)) {
                                    data1.push(o);
                                }
                            })
                        }
                    } else {
                            layer.alert(result.msg, {icon: 2});
                        }
                    transfer.reload('demo1', {
                        data: unique(data1)
                    });
                }
            })
            return false;
        });
        form.on('submit(userSelect-save)', function (data) {
            let data1 = transfer.getData('demo1');
            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            if(data1.length > 0){

                data1.forEach(function (d) {
                    ids += d.value +',';
                    usernames += d.title + ','
                });
                parent.$("#"+userId).val(ids.substring(0,ids.length - 1));	//修改元素属性
                parent.$("#"+userName).val(usernames.substring(0,usernames.length - 1));				//表单回填
            }
            parent.layer.close(index);
        });

    })
    function unique (arr) {
        let array =[];
        let ids = [];
        if(arr.length > 1){
            arr.forEach(function (a) {
                if(!ids.includes(a.value)) {
                    array.push(a);
                    ids.push(a.value);
                }
            })
        }else {
            return arr;
        }
        return array;
    }
</script>
</body>
</html>